import styles from "./test.module.css";
import { useLoaderData } from "react-router";
import { 
  Button, 
  Space, 
  Toast, 
  Dialog, 
  List, 
  Switch, 
  Slider,
  Input,
  TextArea,
  Checkbox,
  Radio,
  Tag,
  Divider
} from "antd-mobile";
import { useState } from "react";

const Test = () => {
  const { records } = useLoaderData();
  const [switchValue, setSwitchValue] = useState(false);
  const [sliderValue, setSliderValue] = useState(50);
  const [inputValue, setInputValue] = useState('');
  const [textareaValue, setTextareaValue] = useState('');
  const [checkboxValue, setCheckboxValue] = useState(false);
  const [radioValue, setRadioValue] = useState('1');

  console.log(records);

  const handleShowDialog = () => {
    Dialog.alert({
      content: '这是一个对话框，测试 React 19 兼容性！',
    });
  };

  const handleShowToast = () => {
    Toast.show({
      content: 'Toast 提示正常工作！',
      position: 'center',
    });
  };

  return (
    <div className={styles.test}>
      <h2>React 19 + Ant Design Mobile 兼容性测试</h2>
      <p>test --1 {records.test}</p>
      
      <Divider>基础组件测试</Divider>
      
      <Space direction="vertical" style={{ width: '100%', padding: '16px' }}>
        <Button color="primary" onClick={handleShowToast}>
          显示 Toast
        </Button>
        
        <Button color="success" onClick={handleShowDialog}>
          显示 Dialog
        </Button>
        
        <Button color="warning">
          警告按钮
        </Button>
        
        <Button color="danger">
          危险按钮
        </Button>
      </Space>

      <Divider>表单组件测试</Divider>
      
      <List style={{ '--border-top': 'none' }}>
        <List.Item
          extra={
            <Switch
              checked={switchValue}
              onChange={setSwitchValue}
            />
          }
        >
          Switch 开关
        </List.Item>
        
        <List.Item>
          <Slider
            value={sliderValue}
            onChange={(value) => setSliderValue(Array.isArray(value) ? value[0] : value)}
          />
          <div style={{ textAlign: 'center', marginTop: '8px' }}>
            滑块值: {sliderValue}
          </div>
        </List.Item>
        
        <List.Item>
          <Input
            placeholder="请输入内容"
            value={inputValue}
            onChange={setInputValue}
          />
        </List.Item>
        
        <List.Item>
          <TextArea
            placeholder="请输入多行文本"
            value={textareaValue}
            onChange={setTextareaValue}
            rows={3}
          />
        </List.Item>
        
        <List.Item
          extra={
            <Checkbox
              checked={checkboxValue}
              onChange={setCheckboxValue}
            />
          }
        >
          Checkbox 复选框
        </List.Item>
        
        <List.Item>
          <Radio.Group value={radioValue} onChange={(value) => setRadioValue(String(value))}>
            <Space direction="vertical">
              <Radio value="1">选项 1</Radio>
              <Radio value="2">选项 2</Radio>
              <Radio value="3">选项 3</Radio>
            </Space>
          </Radio.Group>
        </List.Item>
      </List>

      <Divider>展示组件测试</Divider>
      
      <Space style={{ padding: '16px' }}>
        <Tag color="primary">主要标签</Tag>
        <Tag color="success">成功标签</Tag>
        <Tag color="warning">警告标签</Tag>
        <Tag color="danger">危险标签</Tag>
      </Space>
      
      <div style={{ padding: '16px', textAlign: 'center' }}>
        <p>进度条组件在当前版本中不可用</p>
        <p>当前进度: 75%</p>
      </div>
    </div>
  );
};

export default Test;
